/**
 * 时间：2021-06-08
 * 作者：韩万路
 * 公司：中亿丰信息
 * 名称：svg中的字段模块
 * 功能：主要是主要模块的组件
 * 优先级:高
 */

Vue.component("space_component_linkTo", {
    data() {
        return {
            id: this.toUuid,
            uuid: this.toUuid, //动态数字名称

            name: "space_component_linkTo", //当前的名称是模块的名称

            parentName: "", //当前父级模块名称

            childrenNodeArray: [], //当前子集的name数组


            //缓存过度动画内容
            animationData:{
                x:0,
                y:0,
                opacity:1,
            },

            main:main,



            data: {
                btnRight:true,//当前左右按钮点击
                btnLeft:true,

                thisShrink:false,    //当前是否在收缩
                isShow:true,       //当前是否隐藏 || 是否启动动画数据
                isAnimation:false,  //是否使用animation动画数据

                opacity:1,          //透明度
                childrenListId:[],
                position: {
                    x: 0,
                    y: 0,
                },
                innerSize: {
                    width: 50,
                    width2:180,
                    height: 50,  //95    115   /140
                },
                parentId: "",
                name:"关联线",
                toNode:"",

                
            },


            data_on_childrenShrinkage: true, //当前的子集是否隐藏  true 是不隐藏

        }
    },
//     <text   text-rendering="inherit" dominant-baseline="text-before-edge"
//     :font-size="data.font_size" :y="10"  :x="data.font_size" 
//     :w="computed_textWidth"
//  >
//     文本域{data.text}!
// </text>


    template: `
        <g 
            
            :class="name"
            :transform="'matrix( 1 0 0 1 '+ 
            0 +' '+ 
            0+' )'"


            :opacity="data.isAnimation?animationData.opacity:data.opacity"

            :style="{pointerEvents:main.mouse_isDown ?'none':'all'}"

            :thisShrink="computed_thisShrink"   
            :v-show="data.isShow"
        >
            <!--两条线的链接内容---------------------------------------------------------------------------------------->

            <!--:d="M34.5 0 Q34 -140, 80 -140" -->
            <path 
                style="pointer-events: none;"
                class="svg_component_string"
                :d="computed_linePosition" 
                
                
                fill="none"
                marker-end="url(#kity_marker_2)" 
                />


            <!-- 复用标签s -->
            <marker id="kity_marker_2" orient="auto" refX="6" refY="0" viewBox="-40 -40 80 80"
                markerWidth="80" markerHeight="80" markerUnits="userSpaceOnUse">
                
                <circle cx="0" cy="0" r="12" stroke="black"
stroke-width="0" fill="#FFFFFF"/>
            </marker>








            <!--这个g是显示主要的内容里面的组------------------------------------------------------------------------------->
            <g
                :transform="'matrix( 1 0 0 1 '+ 
                (computed_parentData.position.x+computed_parentData.innerSize.width+15)  +' '+ 
                (computed_parentData.position.y) +' )'"
            
            
            >
                <!--主要显示内容的框架-->
                <rect 
                class="fil2 str2" 
                :x="0" 
                y="0" 
                :width="data.innerSize.width2" 
                :height="computed_height" 
                rx="6" 
                ry="6"  
                stroke="rgba(57, 80, 96,0)" 
                stroke-width="3" 
                fill="#ffffff" 
                filter="url(#dropshadow)" 
                >

                </rect>    



                <foreignObject 
                    :x="0 + -30 - 5" 
                    :y="0" 
                    :width="data.innerSize.width2 + 30*2 + 5*2" 
                    :height="computed_height" 
                    style="position:absolute"
                    class="foreignObject"
                >
                    <!--主要内容-->
                    <div class="foreignObject-header" style="">
                        <div class="foreignObject-icon logo-icon-link"></div>
                        <div class="foreignObject-name"
                            style="
                                width: 130px;
                                display:flex;
                                
                            "
                        >
                            <span style="
                                max-width: 83px;
                                display: table-caption;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            "> 
                                文本域{computed_parentData.fieldType.name}!</span>
                                > 到  
                            </div> 
                        <!--左右按钮-->
                        <div class="" style="width: 300px;position: absolute;left: -36px;">

                            <button class="btn-add  btn-icon-link-linkbtn"    ></button>
        <!--<button class="btn-add  btn-icon-link-right" :style="{transform:data.btnRight?'rotateY(180deg)':'rotateY(0deg)'}"   v-on:click="fun_on_childrenShrinkage(true)"></button>-->
                        </div>
                    </div>
                </foreignObject>
            
            </g>


            <!--这个g是显示链接内容的组------------------------------------------------------------------------------------------------------------>
            <g
                :id="computed_toUuid" 
                class="movetrue" 
                :transform="'matrix( 1 0 0 1 '+ 
                (data.isAnimation?animationData.x:data.position.x)  +' '+ 
                (data.isAnimation?animationData.y:data.position.y) +' )'"
            
            >
                <!--主要显示内容的框架-->
                <rect 
                class="fil2 str2" 
                :x="0" 
                y="0" 
                :width="data.innerSize.width" 
                :height="data.innerSize.height" 
                rx="6" 
                ry="6"  
                stroke="rgba(57, 80, 96,0)" 
                stroke-width="3" 
                fill="#ffffff" 
                filter="url(#dropshadow)" 
                >

                </rect>    



                <foreignObject 
                    :x="0 + -30 - 5" 
                    :y="0" 
                    :width="data.innerSize.width + 30*2 + 5*2" 
                    :height="computed_height" 
                    style="position:absolute"
                    class="foreignObject"
                >
                    <!--主要内容-->
                    <div class="foreignObject-header" style="border:none">
                        <div class="foreignObject-icon logo-icon-link"></div>
                        
                    </div>
                </foreignObject>
            
            </g>
           
            


        </g>
    `,
    props: ["toUuid","modelType"],
    computed: {
        /**
         * 计算属性  : 计算当前宽度多少
         * @returns 
         */
        computed_textWidth: function() {
            return this.data.innerSize.width;
        },
        computed_toUuid: function() {

            this.fun_thisToChildren();
            return this.toUuid;
        },
        /**
         * 
         * @returns 
         */
        computed_childrenLength: function() {

            return Object.keys(this.childrenNodeArray).length;
        },
        /**
         * 计算height高度的内容
         */
        computed_height:function()
        {
            let height  = 50;
            //同步下数字

            this.data.innerSize.height = height;

            return height;
        },
        /**
         * 是否收缩动态的内容
         */
        computed_thisShrink:function(){
            //收缩函数
            if (this.data.thisShrink)
            //是收缩
            {
              
            }else
            //不是收缩
            {

            };
        },
        /**
         * 
         * @returns 获取链接的父级内容数据
         */
        computed_parentData:function(){
            //console.log("-------------!---------",this.data.parentId);
            let parentId = this.data.parentId;
            if(parentId != undefined){
                let parentData = main.requestData[main.requestData.modelType][parentId].data;


                return parentData;
            }else
            {
                return {position:{x:0,y:0}}
            }


            
        },
        /**
         * 
         * @returns 链接线数据   
         */
        computed_linePosition: function() {


            // debugger
            //获取父级的弄的节点
            let  parentData  = main.requestData[main.requestData.modelType][this.data.parentId].data;

            let mainData = main.requestData[main.requestData.modelType];


            let inNodeData = {
                position:{
                    x:this.computed_parentData.position.x ,
                    y:this.computed_parentData.position.y
                },
                innerSize:{
                    width:this.computed_parentData.innerSize.width ,
                    width2:this.computed_parentData.innerSize.width2 ,
                    height:this.computed_parentData.innerSize.height
                }
            };


            
            // console.log("获取当前鼠标移动的内容节点",main.mouse_movePath);


            let toNodeData = null;







            
            toNodeData = {
                position:{
                    x:this.data.position.x ,
                    y:this.data.position.y
                },
                innerSize:{
                    width:this.data.innerSize.width ,
                    height:this.data.innerSize.height
                }
            }



            
            
            


            var toNode = undefined ;
            
            //判断当前是否有数据内容

            let isBodyData = util_parseDomPath({
                path: main.mouse_movePath,
                el: ".movetrue",
            });
            if(isBodyData.code == 0 && isBodyData.dom.id != this.id  && main.mouse_isDown && main.mouse_selectComponentIdS[0] == this.id)
            {

                

               let stoNode =  mainData[isBodyData.dom.id];

                //分类当前的内容
                if(stoNode != undefined)
                {   


                    //console.log("----------------end-----------",stoNode);
                    //如果字段找到的话则获取模型
                    if(stoNode.component == "space_component_field")
                    {

                        //获取选中父级的模型
                        let  selectParentData =  mainData[stoNode.data.parentId].data;

                        // 判断当前如果是同模型的id则不使用
                        if(stoNode.data.parentId !=  mainData[this.data.parentId].data.parentId     ){
                            
                            parentData.link_field.id = isBodyData.dom.id;    //同步字段的id
                            parentData.link_field.name = stoNode.data.name; //同步字段的名称




                            parentData.link_model.id = stoNode.data.parentId;    //同步字段的id
                            parentData.link_model.name = selectParentData.name; //同步字段的名称




                        };

                    //如果获取的是模型则不需要字段
                    }else if(stoNode.component == "space_component_mode")
                    {

                        parentData.link_field.id = "";    //同步字段的id
                        parentData.link_field.name = ""; //同步字段的名称


                        parentData.link_model.id = isBodyData.dom.id;   //同步字段的id
                        parentData.link_model.name = stoNode.data.name; //同步字段的名称


                    };
                }else
                {
                }
               

            }else if(isBodyData.code == 0  && main.mouse_isDown && main.mouse_selectComponentIdS[0] == this.id)
            {

                parentData.link_field.id = "";    //同步字段的id
                parentData.link_field.name = ""; //同步字段的名称


                parentData.link_model.id = ""    //同步字段的id
                parentData.link_model.name = ""; //同步字段的名称
            }
            //判断当前是否为空



            if(parentData.link_field.id != "")
            {


                function position(data){
                   return {
                        x:data.position.x+data.innerSize.width+15,
                        y:data.position.y
                   };
                };

               
                this.data.position = position( mainData[parentData.link_field.id].data);

                // toNodeData.innerSize.height = toNode.data.innerSize.height;
                // toNodeData.innerSize.width = toNode.data.innerSize.width;

                
            }else if(parentData.link_model.id != "")
            {


                function position(data){
                    return {
                         x:data.position.x+data.innerSize.width+15,
                         y:data.position.y - 20,
                    };
                 };
 
                
                 this.data.position = position( mainData[parentData.link_model.id].data);
                
            }else
            {
                //console.log("----------------end");
            }

            
           



            let path = null;

            //c
            try{
                //判断当前是否是在左边还是在右边
                
                
                //计算当前x轴的间隔距离
                let distance = 0;

                distance = distance - inNodeData.innerSize.width/2.5;


                let inPosition = {
                    x:inNodeData.innerSize.width + inNodeData.position.x + inNodeData.innerSize.width2 + 150,
                    y:inNodeData.innerSize.height / 2 + inNodeData.position.y,
                };

                let toPosition = {
                    x:this.data.position.x+this.data.innerSize.width,
                    y:this.data.innerSize.height / 2 + this.data.position.y,
                };

                path = {
                    M: {
                        x:inPosition.x ,  //从   的宽度 加上 left边   加上   第二个位置
                        y: inPosition.y,
                    },
                    C: {
                        x1:(toPosition.x+120 < inPosition.x+120?inPosition.x+120:toPosition.x+120),
                        y1: inPosition.y,

                        x2: (toPosition.x+120 < inPosition.x+120?inPosition.x+120:toPosition.x+120),
                        y2: toPosition.y,
                    },
                    E: {
                        x: toPosition.x,
                        y: toPosition.y,
                    }
                };
                // console.log(main.requestData[this.modelType][this.id]);
                // 'M'+path.M.x+' '+path.M.y+'    Q'+path.Q.x+' '+path.Q.y+', '+path.E.x+' '+path.E.y
                return 'M' + path.M.x + ' ' + path.M.y + '    C' + path.C.x1 + ' ' + path.C.y1 + ' ' + path.C.x2 + ' ' + path.C.y2 + ', ' + path.E.x + ' ' + path.E.y;
            
            }catch(e)
            {
                //console.log(e);
                return "";
            }
            
           




            
        },




    },
    methods: {


        /**
         * 获取数据
         */
        fun_getData() {
            return this.data;
        },
        /**
         * 插入数据 覆盖
         */
        fun_setData(data) {
            let newData = {...this.data,...data};
            this.data = newData;

        },
        /**
         * 初始化创建的时候获取main里面的server和app里面的值并且传入到当前
         */
        fun_initGetMainData:function(){
            //获取创建时的内存地址
            let mainData = main.requestData[this.modelType][this.id].data;
            //吧获取的数据同步到当前
            this.fun_setData(mainData);
            //吧同步后的数据发送到main里面
            let getData  = this.fun_getData();
            this.$set(
                main.requestData[this.modelType][this.id],
                "data",
                getData
            );

            //console.log(main.requestData[this.modelType][this.id]);
            
            
            //注册当前到parent
            // this.fun_registerToParent();


            //初始化完毕更新线段
            // main.fun_component_updateLink();

        },

        /**
         * 发送当前的this到外部
         */
        fun_thisToChildren: function() {
            // this.$emit('increase', this);
        },
        
        /**
         * 点击执行children收缩
         */
        fun_on_childrenShrinkage: function(isRight) {
            if(isRight)
            {
                this.data.btnRight = !this.data.btnRight;
            }else
            {
                this.data.btnLeft = !this.data.btnLeft;
            }
        },
        /**
         * 创建内容
         */
        fun_on_createChildren(craeteComponentName)
        {   
            main.fun_component_addChildren(this.id,craeteComponentName);
        },
        fun_registerToParent:function(){
            
            //吧当前的id传入到父级里面
            //获取父级的数据
            let parentData = main.requestData[main.requestData.modelType][this.data.parentId].data;
            parentData.linkTo = this.id;

        }


    },
    created() {
        //创建完毕后插入到当前对象
        this.fun_initGetMainData();

            

    }

});













/**
 *  当前模块的属性设置
 *  space_component_mode_properties
 */

 Vue.component("space_component_linkTo_properties",{
    props:[
        "thisObject"
    ],
    data:function(){
        return{
            
        }
    },
    template:`
    <div >
        
    </div>
    `,
    methods:{
        
    },
    created()
    {
    },


});